<template>
  <div id="ztree">
<!--    &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="addLeaf" href="#" title="增加叶子节点" >增加叶子节点</a> ]-->
<!--    &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="edit" href="#" title="编辑名称" >编辑名称</a> ]<br/>-->
<!--    &nbsp;&nbsp;&nbsp;&nbsp;[ <a id="remove" href="#" title="删除节点">删除节点</a> ]-->
<!--    [ <a id="clearChildren" href="#" title="清空子节点" >清空子节点</a> ]-->
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</template>

<script>
    import '../../plugins/zTree/js/jquery.ztree.all.js'
    import '../../plugins/zTree/js/jquery.ztree.exhide.js'
    let newCount=0;
    export default {
        props:['newrootdoc'],
        name: "zTree",
        data(){
            return {
                setting: {
                    view: {
                        selectedMulti: false,
                        showLine:false
                    },
                    edit: {
                        enable: true,
                        showRemoveBtn: false,
                        showRenameBtn: false,
                        drag: {
                            isCopy: true,//能够复制
                            isMove: true,//能够移动
                            prev: true,//不能拖拽到节点前
                            next: true,//不能拖拽到节点后
                            inner: true//只能拖拽到节点中
                        }
                    },
                    data: {
                        keep: {
                            parent: true,
                            leaf: true
                        },
                        simpleData: {
                            enable: true,
                            idKey: "id",
                            pIdKey: "pId",
                            rootPId: 0
                        }
                    },
                    callback: {
                        beforeDrag: this.beforeDrag,
                        beforeRename: this.beforeRename,
                        onRemove: this.onRemove,
                        beforeDrop:this.beforeDrop,
                        onClick: this.zTreeOnClick,
                        onRightClick:this.OnRightClick
                    }
                },
                zNodes: [
                    {id: 1, pId: 0, name: "父节点 1", open: true,folder:true},
                    {id: 11, pId: 1, name: "叶子节点 1-1",isHidden:true},
                    {id: 12, pId: 1, name: "叶子节点 1-2",isHidden:true},
                    {id: 2, pId: 0, name: "父节点 2",folder:true},
                    {id: 13, pId: 2, name: "父节点 2-1",folder:true},
                    {id: 12, pId: 2, name: "叶子节点 1-2",isHidden:true},
                    {id: 12, pId: 2, name: "叶子节点 1-2",isHidden:true},
                    {id: 3, pId: 0, name: "父节点 3", open: true,folder:true},
                ]
            }
        },
        methods: {
            beforeDrag:function(treeId, treeNodes) {
                for (var i=0,l=treeNodes.length; i<l; i++) {
                    if (treeNodes[i].drag === false) {
                        return false;
                    }
                }
                return true;
            },
            beforeDrop:function(treeId, treeNodes, targetNode, moveType) {
                return targetNode ? targetNode.drop !== false : true;
            },
            onRemove:function(e, treeId, treeNode) {
            },
            beforeRename:function(treeId, treeNode, newName) {
                if (newName.length == 0) {
                    alert("节点名称不能为空.");
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    setTimeout(function(){zTree.editName(treeNode)}, 10);
                    return false;
                }
                return true;
            },
            add:function(e,notroot){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    isParent = e;//是否是文件夹
                if(notroot==1){//notroot=0时，表示添加pid=0的节点
                   var nodes = zTree.getSelectedNodes(),
                    treeNode = nodes[0];
                }
                if (treeNode) {//添加入被选中的节点
                    treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
                } else {//添加入“我的文件夹”
                    if(isParent){//若是文件夹，则添加
                    treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
                    }else{//若是笔记，则添加并隐藏
                        treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++),isHidden:true});
                    }
                }
                if (treeNode) {
                    zTree.editName(treeNode[0]);
                } else {
                    alert("不能为笔记增加子节点哦");
                }
            },
            edit:function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    nodes = zTree.getSelectedNodes(),
                    treeNode = nodes[0];
                if (nodes.length == 0) {
                    alert("请先选择一个节点");
                    return;
                }
                zTree.editName(treeNode);
            },
            removenode:function(e) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    nodes = zTree.getSelectedNodes(),
                    treeNode = nodes[0];
                if (nodes.length == 0) {
                    alert("请先选择一个节点");
                    return;
                }
                var callbackFlag = $("#callbackTrigger").attr("checked");
                zTree.removeNode(treeNode, callbackFlag);
            },
            clearChildren:function(e) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    nodes = zTree.getSelectedNodes(),
                    treeNode = nodes[0];
                if (nodes.length == 0 || !nodes[0].isParent) {
                    alert("请先选择一个父节点");
                    return;
                }
                zTree.removeChildNodes(treeNode);
            },
            //使得folder=true的节点样式变成文件夹
            fixIcon(){
                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                //过滤出folder属性为true的节点
                var folderNode = treeObj.getNodesByFilter(function (node) { return node.folder});
                // var hiddenNode=treeObj.getNodesByFilter(function (node) {return node.isHidden==null});
                for(var j=0 ; j<folderNode.length; j++){//遍历过滤出的节点，设置其isParent属性为true;
                    folderNode[j].isParent = true;
                }
                // for(var i=0;i<hiddenNode.length;j++){
                //     hiddenNode[i].isHidden=true;
                // }
                treeObj.refresh();//调用api自带的refresh函数。
            },
            zTreeOnClick(e,treeNode,treeId){//点击子节点触发方法
           },
            OnRightClick(event, treeId, treeNode) {
                console.log(treeId)
            },
        },
        watch:{
            zNodes:function (val) {
                $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
                this.fixIcon()
            }
        },
        mounted(){
            this.$nextTick(function () {
                $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
                this.fixIcon();
                $("#addParent").bind("click", {isParent:true}, this.add);
                $("#addLeaf").bind("click", {isParent:false}, this.add);
                $("#edit").bind("click", this.edit);
                $("#remove").bind("click", this.removenode);
                $("#clearChildren").bind("click",this.clearChildren);
            })
        },

    }
</script>
<style>
  @import '../../plugins/zTree/css/zTreeStyle/zTreeStyle.css';
  #ztree{
    width: 100%;
  }
</style>
